new Vue({
    el: "#vue-app",
    data: {
        name: "",
        age: "",
        a: 0,
        b: 0
    },
    methods: {
        logName: function() {
            this.name = this.$refs.name.value;
        },
        // addToA : function() {
        // 	console.log('a');
        // 	return this.a + this.age;

        // },
        // addToB : function () {
        // 	console.log('b');
        // 	return this.b + this.age;

        // },这种方法都会用，点击一个全部的都会执行， 重新渲染页面

    },
    /**
    vue有个虚拟的DOM，
    用computed就用虚拟的DOM和真实的DOM对比， 如果有变化的才重新渲染，
    没有变化的就不用渲染， 对于搜索，大规模的项目可以减少开销
    注意： 用computed调用函数的时候就不能写括号， 
    */
    computed: {
        addToA: function() {
            console.log('a');
            return this.a + this.age;

        },
        addToB: function() {
            console.log('b');
            return this.b + this.age;

        }
    }
    // 	计算属性的 setter

    // 计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：
    // // ...
    // computed: {
    // 	fullName: {
    // 		// getter
    // 		get: function() {
    // 			return this.firstName + ' ' + this.lastName
    // 		},
    // 		// setter
    // 		set: function(newValue) {
    // 			var names = newValue.split(' ')
    // 			this.firstName = names[0]
    // 			this.lastName = names[names.length - 1]
    // 		}
    // 	}

    // 现在再运行 vm.fullName = 'John Doe' 时，setter 会被调用，vm.firstName 和 vm.lastName 也会相应地被更新。

    // ====	侦听器====

    // 虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

    //---监听器watch---

    // watch: {
    // 	// 如果 `question` 发生改变，这个函数就会运行
    // 	question: function (newQuestion, oldQuestion) {
    // 	  this.answer = 'Waiting for you to stop typing...'
    // 	  this.debouncedGetAnswer()
    // 	}
    //   },
    // 使用 watch 选项允许我们执行异步操作 (访问一个 API)，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。
});